<template>
  <div>
    <div class="top-fixed">
      <x-header
        :left-options="{ backText: $t('common.back'), preventGoBack: true }"
        class="header"
        @on-click-back="clickBack"
      >
        <header-title :title="$t('notice.noticeDetail')" />
      </x-header>
    </div>

    <div class="detail">
      <!-- 发布人 -->
      <group style="margin-top:47px">
        <cell :title="$t('notice.publisher')">
          <span>
            {{ noticeDetail.createUserName }}
          </span>
        </cell>
        <cell :title="$t('notice.title')">
          <span>
            {{ noticeDetail.title }}
          </span>
        </cell>
        <cell :title="$t('notice.createTime')">
          <span>
            {{ noticeDetail.createTime }}
          </span>
        </cell>
        <cell :title="$t('notice.content')" class="content">
          <div v-html="noticeDetail.content"/>
        </cell>
      </group>
    </div>
  </div>
</template>

<script>
import { XHeader, Divider, Group, Cell } from 'vux';
import HeaderTitle from '@/components/common/HeaderTitle';

// 使用cookies 存储 token
import { setToken } from '@/utils/auth';

// 使用jssdk存储至豆豆客户端
// import { setToken } from '@/utils/auth-jssdk';

import { me, thirdPartyLogin } from '@/api/login';
import { getMessagesDetail } from '@/api/message-detail';
export default {
  components: {
    XHeader,
    Divider,
    HeaderTitle,
    Group,
    Cell,
  },
  data() {
    return {
      fromMessage: false, // 是否从消息模板进入
      messageId: '',
      userInfoObj: {},
      noticeDetail: {},
      id: '', // 消息id
    };
  },
  created() {
    this.fromMessage = this.GetUrlParam('fromMessage');
    this.messageId = this.GetUrlParam('messageId');
    if (this.fromMessage) {
      vrv.jssdk.getAccountInfo({
        success: res => {
          console.log(res, 'jssdk');
          this.reLogin(res.mUserId);
        },
      });
      return;
    }
    this.id = this.$route.query.id;
    this.getNoticeDetail(this.id);
  },
  methods: {
    // 返回
    clickBack() {
      // 如果时从模板消息进入详情，点击返回则直接退出到消息模板
      if (this.fromMessage) {
        vrv.jssdk.closeView({});
      } else {
        this.$router.go(-1);
      }
    },
    // 获取连接参数值
    GetUrlParam(paraName) {
      const url = document.location.toString();
      const arrObj = url.split('?');

      if (arrObj.length > 1) {
        const arrPara = arrObj[1].split('&');
        let arr;

        for (let i = 0; i < arrPara.length; i++) {
          arr = arrPara[i].split('=');

          if (arr != null && arr[0] === paraName) {
            return arr[1];
          }
        }
        return '';
      } else {
        return '';
      }
    },
    // 从模板消息进入需要重新登陆
    async reLogin(dood) {
      const result = await thirdPartyLogin({ dood: dood });
      if (result.status === 200) {
        const token = result.headers['authorization'];
        await setToken(token);
        await this.userInfo();
        await this.getNoticeDetail(this.messageId);
      }
    },
    // 重新获取用户信息并且存储到store中
    async userInfo() {
      const result = await me();
      if (result.status === 200 && result.data.userRole !== '') {
        this.userInfoObj = result.data;
        this.$store.commit('me', result.data);
      }
    },
    // 获取通知详情
    async getNoticeDetail(id) {
      const detail = await getMessagesDetail(id);
      this.noticeDetail = detail.data;
      this.noticeDetail.createTime = this.$moment(
        new Date(this.noticeDetail.createTime)
      ).format('YYYY-MM-DD HH:mm');
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  .content {
    background: #fff;
    font-size: 34px;
    padding: 20px 30px 20px 30px;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    text-overflow: ellipsis;
  }
}
.messeage-content {
  margin-top: 140px;
  padding: 0 30px;
  p {
    margin-top: 15px;
    font-size: 28px;
  }
}
.content /deep/ .vux-label {
  width: 80px;
}
.content /deep/ .weui-cell__ft {
  width: 75%;
  word-break: break-all;
}
</style>
